define(function(require, exports, module) {

  var $ = require('jquery');
  
  var cegTmpl = require('abc/tmpl/ceg/index')
  
  var tmpl = require('text!main.html')
  
  //<!-- Required styles for MDC Web -->
  require('css!https://unpkg.com/material-components-web@4.0.0/dist/material-components-web.min.css')
  //<!-- Required MDC Web JavaScript library -->
  var mdc = require('https://unpkg.com/material-components-web@4.0.0/dist/material-components-web.min.js')

  var {MDCTopAppBar} = mdc.topAppBar
  var {MDCDrawer} = mdc.drawer
  var {MDCList} = mdc.list
  var {MDCTextField} = mdc.textField
  var {MDCTabBar} = mdc.tabBar
  
  
  function main() {
    $('#app')
      .append(tmpl)
      .append(cegTmpl(1, 3, 1, '单文件解析README.md程序'));
    
    const list = MDCList.attachTo(_$('.mdc-list'));
    list.wrapFocus = true;

    const drawer = MDCDrawer.attachTo(_$('.mdc-drawer'));
    
    const topAppBar = MDCTopAppBar.attachTo(_$('#app-bar'));
    
    const mainContentEl = _$('#main-content');
    
    topAppBar.setScrollTarget(mainContentEl);
    topAppBar.listen('MDCTopAppBar:nav', () => {
      drawer.open = !drawer.open;
    });
    
    const listEl = _$('.mdc-drawer .mdc-list');
    listEl.addEventListener('click', (event) => {
      drawer.open = false;
    });
    
    const tabBar = new MDCTabBar(_$('.mdc-tab-bar'));
    
    //<!-- Instantiate single textfield component rendered in the document -->
    MDCTextField.attachTo(_$('.mdc-text-field'));
    
  }
  
  function _$(selector) {
    return document.querySelector(selector);
  }

  return main;
})
